{% extends 'base.html' %}
{% load static %}

{% block title %}编辑维修记录 - {{ maintenance.title }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-10">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-edit me-2"></i>编辑维修记录</h5>
                </div>
                
                <div class="card-body">
                    <form method="post" id="maintenanceUpdateForm">
                        {% csrf_token %}
                        
                        <div class="row">
                            <!-- 基本信息 -->
                            <div class="col-md-6">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <h6 class="mb-0">基本信息</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="mb-3">
                                            <label class="form-label">资产信息</label>
                                            <div class="form-control-plaintext">
                                                <strong>{{ maintenance.asset.name }}</strong> ({{ maintenance.asset.asset_number }})
                                            </div>
                                        </div>
                                        
                                        <div class="mb-3">
                                            <label for="maintenance_type" class="form-label">维修类型 <span class="text-danger">*</span></label>
                                            <select class="form-select" id="maintenance_type" name="maintenance_type" required>
                                                {% for value, label in type_choices %}
                                                    <option value="{{ value }}" {% if value == maintenance.maintenance_type %}selected{% endif %}>
                                                        {{ label }}
                                                    </option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                        
                                        <div class="mb-3">
                                            <label for="status" class="form-label">维修状态 <span class="text-danger">*</span></label>
                                            <select class="form-select" id="status" name="status" required>
                                                {% for value, label in status_choices %}
                                                    <option value="{{ value }}" {% if value == maintenance.status %}selected{% endif %}>
                                                        {{ label }}
                                                    </option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                        
                                        <div class="mb-3">
                                            <label for="priority" class="form-label">优先级 <span class="text-danger">*</span></label>
                                            <select class="form-select" id="priority" name="priority" required>
                                                {% for value, label in priority_choices %}
                                                    <option value="{{ value }}" {% if value == maintenance.priority %}selected{% endif %}>
                                                        {{ label }}
                                                    </option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                        
                                        <div class="mb-3">
                                            <label for="title" class="form-label">维修标题 <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="title" name="title" 
                                                   value="{{ maintenance.title }}" required>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 详细信息 -->
                            <div class="col-md-6">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <h6 class="mb-0">详细信息</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="mb-3">
                                            <label for="description" class="form-label">问题描述 <span class="text-danger">*</span></label>
                                            <textarea class="form-control" id="description" name="description" 
                                                      rows="4" required>{{ maintenance.description }}</textarea>
                                        </div>
                                        
                                        <div class="mb-3">
                                            <label for="solution" class="form-label">解决方案</label>
                                            <textarea class="form-control" id="solution" name="solution" 
                                                      rows="4" placeholder="请描述解决方案...">{{ maintenance.solution }}</textarea>
                                        </div>
                                        
                                        <div class="mb-3">
                                            <label for="technician" class="form-label">指定技师</label>
                                            <select class="form-select" id="technician" name="technician">
                                                <option value="">请选择技师</option>
                                                {% for technician in technicians %}
                                                    <option value="{{ technician.pk }}" 
                                                            {% if technician.pk == maintenance.technician.pk %}selected{% endif %}>
                                                        {{ technician.get_full_name|default:technician.username }}
                                                    </option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 时间信息 -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h6 class="mb-0">时间信息</h6>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="scheduled_at" class="form-label">计划维修时间</label>
                                            <input type="datetime-local" class="form-control" id="scheduled_at" name="scheduled_at"
                                                   value="{% if maintenance.scheduled_at %}{{ maintenance.scheduled_at|date:'Y-m-d\TH:i' }}{% endif %}">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="started_at" class="form-label">开始维修时间</label>
                                            <input type="datetime-local" class="form-control" id="started_at" name="started_at"
                                                   value="{% if maintenance.started_at %}{{ maintenance.started_at|date:'Y-m-d\TH:i' }}{% endif %}">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="completed_at" class="form-label">完成时间</label>
                                            <input type="datetime-local" class="form-control" id="completed_at" name="completed_at"
                                                   value="{% if maintenance.completed_at %}{{ maintenance.completed_at|date:'Y-m-d\TH:i' }}{% endif %}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 成本和供应商信息 -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h6 class="mb-0">成本和供应商信息</h6>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="estimated_cost" class="form-label">预估成本</label>
                                            <div class="input-group">
                                                <span class="input-group-text">¥</span>
                                                <input type="number" class="form-control" id="estimated_cost" 
                                                       name="estimated_cost" step="0.01" min="0" 
                                                       value="{{ maintenance.estimated_cost|default:'' }}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="actual_cost" class="form-label">实际成本</label>
                                            <div class="input-group">
                                                <span class="input-group-text">¥</span>
                                                <input type="number" class="form-control" id="actual_cost" 
                                                       name="actual_cost" step="0.01" min="0" 
                                                       value="{{ maintenance.actual_cost|default:'' }}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="supplier" class="form-label">维修供应商</label>
                                            <select class="form-select" id="supplier" name="supplier">
                                                <option value="">请选择供应商</option>
                                                {% for supplier in suppliers %}
                                                    <option value="{{ supplier.pk }}" 
                                                            {% if supplier.pk == maintenance.supplier.pk %}selected{% endif %}>
                                                        {{ supplier.name }}
                                                    </option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="mb-3">
                                    <label for="notes" class="form-label">备注信息</label>
                                    <textarea class="form-control" id="notes" name="notes" rows="3">{{ maintenance.notes }}</textarea>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 提交按钮 -->
                        <div class="d-flex justify-content-between">
                            <a href="{% url 'assets:maintenance_detail' maintenance.pk %}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left me-1"></i>返回详情
                            </a>
                            <div>
                                <button type="button" class="btn btn-outline-danger me-2" onclick="history.back()">
                                    <i class="fas fa-times me-1"></i>取消
                                </button>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-1"></i>保存更改
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('maintenanceUpdateForm');
    const statusSelect = document.getElementById('status');
    const startedAtInput = document.getElementById('started_at');
    const completedAtInput = document.getElementById('completed_at');
    const prioritySelect = document.getElementById('priority');
    
    // 根据状态自动设置时间
    statusSelect.addEventListener('change', function() {
        const status = this.value;
        const now = new Date().toISOString().slice(0, 16);
        
        if (status === 'in_progress' && !startedAtInput.value) {
            startedAtInput.value = now;
        } else if (status === 'completed' && !completedAtInput.value) {
            completedAtInput.value = now;
            if (!startedAtInput.value) {
                startedAtInput.value = now;
            }
        }
    });
    
    // 优先级颜色提示
    function updatePriorityColor() {
        const priority = prioritySelect.value;
        prioritySelect.classList.remove('border-danger', 'border-warning', 'border-info', 'border-secondary');
        
        if (priority === 'urgent') {
            prioritySelect.classList.add('border-danger');
        } else if (priority === 'high') {
            prioritySelect.classList.add('border-warning');
        } else if (priority === 'medium') {
            prioritySelect.classList.add('border-info');
        } else {
            prioritySelect.classList.add('border-secondary');
        }
    }
    
    prioritySelect.addEventListener('change', updatePriorityColor);
    updatePriorityColor(); // 初始化
    
    // 时间验证
    function validateTimes() {
        const scheduled = new Date(document.getElementById('scheduled_at').value);
        const started = new Date(startedAtInput.value);
        const completed = new Date(completedAtInput.value);
        
        if (startedAtInput.value && completedAtInput.value) {
            if (started >= completed) {
                alert('完成时间必须晚于开始时间');
                return false;
            }
        }
        
        return true;
    }
    
    startedAtInput.addEventListener('change', validateTimes);
    completedAtInput.addEventListener('change', validateTimes);
    
    // 表单提交验证
    form.addEventListener('submit', function(e) {
        const title = document.getElementById('title').value.trim();
        const description = document.getElementById('description').value.trim();
        
        if (!title || title.length < 5) {
            e.preventDefault();
            alert('维修标题至少需要5个字符');
            document.getElementById('title').focus();
            return false;
        }
        
        if (!description || description.length < 10) {
            e.preventDefault();
            alert('问题描述至少需要10个字符');
            document.getElementById('description').focus();
            return false;
        }
        
        if (!validateTimes()) {
            e.preventDefault();
            return false;
        }
        
        // 确认提交
        if (!confirm('确定要保存这些更改吗？')) {
            e.preventDefault();
            return false;
        }
    });
});
</script>
{% endblock %}
